import React, { useEffect } from 'react';
import { message, App } from 'antd'; // 注意这里直接导入了 App 和 message

const TestMessage: React.FC = () => {
    useEffect(() => {
        // 在组件挂载后1秒显示一个成功消息
        const timer = setTimeout(() => {
            message.success('这是一个测试成功消息！');
        }, 1000);

        // 在组件卸载时清除定时器
        return () => clearTimeout(timer);
    }, []); // 只在组件挂载和卸载时运行

    return (
        <div>
            <h1>测试消息组件</h1>
            <p>如果消息组件正常工作，您将在1秒后看到一个成功提示。</p>
        </div>
    );
};

// 在您的应用的某个地方（例如 App.tsx 中的一个临时路由）渲染这个组件，
// 确保它被 Ant Design 的 <App> 或 <AntdApp> 包裹。
// 例如，您可以在 App.tsx 的 Routes 中临时添加：
// <Route path="/test-message" element={<TestMessage />} />
// 然后访问 /test-message 路径。

// 注意：在这个独立的测试文件中，我们不能直接运行它。
// 您需要将这个组件添加到您的应用中，并确保它被 AntdApp 包裹后渲染。

export default TestMessage;
